<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>数据大屏</title>
</head>

<body>
  <div class="title">数据大屏</div>
  <div class="content">
    <div id="queryCapacity" class="dv"><a href="../displayView/queryCapacity.html?autoLogin=autoLogin">产能看板</a></div>
    <div id="attendanceBoard" class="dv"><a href="../attendanceMgr/attendanceBoard/index.html?autoLogin=autoLogin">考勤看板</a></div>
    <div id="equipmentBoard" class="dv"><a href="../remoteEquipment/board/equipmentBoard.html?autoLogin=autoLogin">设备看板</a></div>
    <div id="wastageBoard" class="dv"><a href="../remoteEquipment/board/wastageBoard.html?autoLogin=autoLogin">能耗看板</a></div>
    <div id="postSaleBoard" class="dv"><a href="../remoteEquipment/board/postSaleBoard.html?autoLogin=autoLogin">售后看板</a></div>
    <div id="warehouseBoard" class="dv"><a href="../remoteEquipment/board/warehouseBoard.html?autoLogin=autoLogin">仓库看板</a></div>
    <div id="purchaseBoard" class="dv"><a href="../remoteEquipment/board/purchaseBoard.html?autoLogin=autoLogin">采购看板</a></div>
    <div id="financeBoard" class="dv"><a href="../remoteEquipment/board/financeBoard.html?autoLogin=autoLogin">财务看板</a></div>
    <div id="qcReportBoard" class="dv"><a href="../remoteEquipment/board/qcReportBoard.html?autoLogin=autoLogin">质检看板</a></div>
    <div id="personWastageBoard" class="dv"><a href="../remoteEquipment/board/personWastageBoard.html?autoLogin=autoLogin">员工产能</a></div>
    <div id="materialMatchBoard" class="dv"><a href="../remoteEquipment/board/materialMatchBoard.html?autoLogin=autoLogin">车间配套</a></div>
  </div>
</body>

<script type="text/javascript" color="5,39,175" opacity='1' zIndex="-2" count="130" src="canvas-nest.min.js"></script>
<script src="https://upload.shinehao.com.cn/20180810145355jquery.min1.9.1.js"></script>
<script src="../lib/layer/2.4/layer.js"></script>
<script src="https://upload.shinehao.com.cn/20180809103833lodash.js"></script>
<script src="../vueSystem/js/request.js"></script>
<script src="../myJs/util.js"></script>

<script>
  function getToalItem() {
    var $content = $('.content');
    var width = $content.width();
    var colNum = Math.floor(width / 152);
    var height = $content.height();
    var rowNum = Math.floor(height / 162);
    return {
      colNum: colNum === 0 ? 1 : colNum,
      rowNum: rowNum === 0 ? 1 : rowNum
    };
  }

  function fullItems() {
    var obj = getToalItem();
    var colNum = obj.colNum,
      rowNum = obj.rowNum;
    var totalCount = colNum * rowNum;
    var $content = $('.content');
    var count = $content.find('.dv a').length;
    totalCount -= count;
    $content.find('.dv.is-empty').remove();
    if (totalCount < 0) {
      totalCount = colNum - count % colNum;
    }
    for (var i = 0; i < totalCount; i++) {
      $content.append('<div class="dv is-empty"></div>');
    }
  }

  $(function () {
    $(window).on('resize', fullItems);

    var boardListObj = {
      queryCapacity: "/displayView/queryCapacity.html",
      attendanceBoard: "/attendanceMgr/attendanceBoard/index.html",
      equipmentBoard: "/remoteEquipment/board/equipmentBoard.html",
      wastageBoard: "/remoteEquipment/board/wastageBoard.html",
      postSaleBoard: "/remoteEquipment/board/postSaleBoard.html",
      warehouseBoard: "/remoteEquipment/board/warehouseBoard.html",
      purchaseBoard: "/remoteEquipment/board/purchaseBoard.html",
      financeBoard: "/remoteEquipment/board/financeBoard.html",
      qcReportBoard: "/remoteEquipment/board/qcReportBoard.html",
      personWastageBoard: "/remoteEquipment/board/personWastageBoard.html",
      materialMatchBoard: "/remoteEquipment/board/materialMatchBoard.html"
    };
    var index = layer.load(1, {
      shade: [0.1, '#fff']
    });
    SystemUtil.getLoginUser().then(function (user) {
      var pageList = user.pageList;
      for (var key in boardListObj) {
        var pageName = boardListObj[key];
        if (pageList.indexOf(pageName) === -1) {
          $(`#${key}`).remove();
        }
      }
      $('.content').css('display', 'flex');
      fullItems();
      layer.close(index);
    }).catch(function () {
      $('.content').css('display', 'flex');
      fullItems();
      layer.close(index);
    });
  });

</script>
<script>
  function setCookie(name, value, expires) {
    var exp = new Date();
    exp.setTime(exp.getTime() + expires * 1000);
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
  }

  //获取cookie
  function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return false;
  }

  function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null)
      document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";path=/";
  }

  $(function () {
    //获取cookie
    var datavRedirect = getCookie("datav");
    if (datavRedirect != false) {
      delCookie("datav", false, 0);
      window.location.href = datavRedirect;
    }
  })

</script>
<style>
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: auto;
  }

  body {
    padding: 5px;
    height: calc(100% - 10px);
  }

  .title {
    width: 100%;
    text-align: center;
    font-size: 30px;
    color: #ff0000;
    border-bottom: 2px solid #00CCFF;
    line-height: 50px;
  }

  .content {
    width: 100%;
    height: calc(100% - 52px);
    overflow: auto;
    text-align: center;
    justify-content: space-between;
    flex-wrap: wrap;
    display: none;
  }

  .content .dv {
    position: relative;
    width: 140px;
    height: 140px;
    border: 1px solid #00CCFF;
    margin: 0 5px;
    margin-top: 20px;
    font-size: 30px;
    color: white;
  }

  .content .dv a {
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    top: 50%;
    transform: translate(0, -50%);
    text-decoration: none;
  }

</style>

</html>
